<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的</title>
    <style>
        body{font-size: 45px;}
        .top{position:relative;}
        .top>img:first-child{width: 100%;height: 62px;margin-top: -8px;}
        .top>img:nth-child(2){width: 100%;margin-top: -12px;}
        .top>img:nth-child(3){position: absolute;top:61px;left:51px;}
        .top>img:nth-child(4){position: absolute;top:61px;right:51px;}
        .center-bg{width: 100%;height: 1112px;background-color: #f0f0f0;margin-top: -13px;border:1px solid transparent;}
        .center-bg>ul{list-style-type: none;margin: 0;padding: 0;margin-top: 38px;width: 100%;}
        .center-bg>ul>li{width: 100%;height: 143px;border-bottom: 1px solid grey;background-color: white;}
        .margintop{margin-top: 38px;}
        .center-bg>ul>li>span{display: inline-block;height: 143px;line-height: 143px;vertical-align: middle;}
        .center-bg>ul>li>img:first-child{width: 59px;height: 50px;vertical-align: middle;margin-left: 4%;}
        .center-bg>ul>li>img:last-child{width: 26px;height: 56px;float: right;margin-right: 4%;margin-top: 41px;}
        .center-bg>ul>li:after{clear: both;}
        body>ul{background-color:white;list-style-type: none;padding: 0;margin: 0;border-top:1px solid #c8c8c8;position:fixed;bottom:0;width: 100%;}
        body>ul>li{float: left;width: 22%;margin-left: 2.4%;text-align: center;font-size: 28px;}
        p{margin: 11px 0;color: #696969;}
        body>ul>li>img{width: 65px;height: 65px;}
    </style>
</head>
<body>
    <div class="top"><img src="./images/个人中心_02.jpg">
        <img src="./images/个人中心_03.jpg">
        <img src="./images/个人中心_02_03.jpg" >
        <img src="./images/个人中心_02_05.jpg">
    </div>
    <div class="center-bg">
        <ul>
            <li><img src="./images/个人中心_05.png"><span>我的金币</span><img src="./images/个人中心_17.png"></li>
            <li><img src="./images/个人中心_08.png"><span>我的VIP</span><img src="./images/个人中心_17.png"></li>
            <li><img src="./images/个人中心_10.png"><span>任务中心</span><img src="./images/个人中心_17.png"></li>
            <li class="margintop"><img src="./images/个人中心_12.png"><span>我的书单</span><img src="./images/个人中心_17.png"></li>
            <li><img src="./images/个人中心_14.png"><span>我的收藏</span><img src="./images/个人中心_17.png"></li>
            <li class="margintop"><img src="./images/个人中心_21.png"><span>我的阅历</span><img src="./images/个人中心_17.png"></li>
            <li><img src="./images/个人中心_23.png"><span>我的笔记</span><img src="./images/个人中心_17.png"></li>
        </ul>
    </div>
    <ul>
        <li><img src="./images/书架_17.png"><br/>精选</li>
        <li><img src="./images/精选_33.jpg"><br/>书库</li>
        <li><img src="./images/精选_35.jpg"><br/>书架</li>
        <li><img src="./images/我的.png"><br/>我的</li>
    </ul>
</body>
</html>